{% extends "base.html" %}

{% block title %}首页 - 开源安全创意工坊{% endblock %}

{% block content %}
<!-- 欢迎区域 -->
<div class="hero-section text-center py-5 mb-5">
    <div class="container">
        <h1 class="display-4 fw-bold text-primary">
            <i class="fas fa-rocket"></i> 开源安全创意工坊
        </h1>
        <p class="lead">探索网络空间安全的无限可能，用开源协作创造未来</p>
        <div class="mt-4">
            <a href="{{ url_for('create_project') }}" class="btn btn-primary btn-lg me-3">
                <i class="fas fa-plus"></i> 创建新项目
            </a>
            <a href="{{ url_for('projects') }}" class="btn btn-outline-primary btn-lg">
                <i class="fas fa-eye"></i> 浏览项目
            </a>
        </div>
    </div>
</div>

<div class="row">
    <!-- 优秀项目展示 -->
    <div class="col-lg-8">
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h3 class="mb-0"><i class="fas fa-star"></i> 本周优秀创意</h3>
            </div>
            <div class="card-body">
                {% if featured_projects %}
                    <div id="featuredProjectsCarousel" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            {% for project in featured_projects %}
                                <div class="carousel-item {% if loop.first %}active{% endif %}">
                                    <div class="text-center py-4">
                                        <h4>{{ project.name }}</h4>
                                        <p class="text-muted">{{ project.description }}</p>
                                        <div class="mb-3">
                                            <strong>团队成员：</strong>
                                            {% if project.team_members %}
                                                {% set members = project.team_members|fromjson %}
                                                {% for member in members %}
                                                    <span class="badge bg-secondary me-1">{{ member }}</span>
                                                {% endfor %}
                                            {% else %}
                                                <span class="text-muted">暂无成员信息</span>
                                            {% endif %}
                                        </div>
                                        <a href="{{ url_for('project_detail', project_id=project.id) }}" class="btn btn-outline-primary">
                                            <i class="fas fa-eye"></i> 查看详情
                                        </a>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#featuredProjectsCarousel" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#featuredProjectsCarousel" data-bs-slide="next">
                            <span class="carousel-control-next-icon"></span>
                        </button>
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                        <p class="text-muted">暂无优秀项目展示</p>
                        <a href="{{ url_for('create_project') }}" class="btn btn-primary">
                            <i class="fas fa-plus"></i> 创建第一个项目
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- 每日安全贴士 -->
    <div class="col-lg-4">
        <div class="card mb-4">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0"><i class="fas fa-lightbulb"></i> 今日安全贴士</h5>
            </div>
            <div class="card-body">
                {% if today_tip %}
                    <h6 class="text-primary">{{ today_tip.title }}</h6>
                    <p class="small text-muted mb-2">
                        <i class="fas fa-tag"></i> {{ today_tip.category }} 
                        <span class="badge bg-info ms-2">{{ today_tip.difficulty }}</span>
                    </p>
                    <p>{{ today_tip.content }}</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <button class="btn btn-sm btn-outline-danger" onclick="likeTip({{ today_tip.id }})">
                            <i class="fas fa-heart"></i> <span id="tip-likes">{{ today_tip.likes }}</span>
                        </button>
                        <small class="text-muted">
                            <i class="fas fa-calendar"></i> {{ today_tip.created_at.strftime('%Y-%m-%d') }}
                        </small>
                    </div>
                {% else %}
                    <p class="text-muted">今日暂无安全贴士</p>
                {% endif %}
            </div>
        </div>

        <!-- 快速统计 -->
        <div class="card">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="fas fa-chart-bar"></i> 平台统计</h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-6">
                        <h4 class="text-primary">{{ featured_projects|length }}</h4>
                        <small class="text-muted">优秀项目</small>
                    </div>
                    <div class="col-6">
                        <h4 class="text-warning">8</h4>
                        <small class="text-muted">安全贴士</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 功能介绍 -->
<div class="row mt-5">
    <div class="col-12">
        <h3 class="text-center mb-4"><i class="fas fa-cogs"></i> 平台功能</h3>
    </div>
    <div class="col-md-4 mb-3">
        <div class="card h-100 text-center">
            <div class="card-body">
                <i class="fas fa-project-diagram fa-3x text-primary mb-3"></i>
                <h5>项目管理</h5>
                <p class="small">创建和管理你的开源项目，支持团队协作和版本控制</p>
            </div>
        </div>
    </div>
    <div class="col-md-4 mb-3">
        <div class="card h-100 text-center">
            <div class="card-body">
                <i class="fas fa-tasks fa-3x text-success mb-3"></i>
                <h5>任务看板</h5>
                <p class="small">使用看板管理项目任务，支持拖拽操作和状态跟踪</p>
            </div>
        </div>
    </div>
    <div class="col-md-4 mb-3">
        <div class="card h-100 text-center">
            <div class="card-body">
                <i class="fas fa-file-pdf fa-3x text-danger mb-3"></i>
                <h5>路演工具</h5>
                <p class="small">一键生成项目海报和路演文档，支持PDF导出</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function likeTip(tipId) {
    fetch(`/api/tips/${tipId}/like`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('tip-likes').textContent = data.likes;
    })
    .catch(error => console.error('Error:', error));
}
</script>
{% endblock %}
